<template>
  <!--  银行卡信息-->
  <Table border :header-style="{backgroundColor:'#fffbed'}" :table-data="data" :table-column="tableColumn"
         :page="false">
    <template slot="accountType" slot-scope="{row}">
      {{ formaterType(row) }}
    </template>
  </Table>
</template>

<script>
import {bankCardInfo} from "@/api/order";
export default {
  props: ['routesQuery'],
  name: "bankCardInfo",
  data() {
    return {
      data: [],
      tableColumn: [
        {label: this.$t('银行卡类型'), prop: 'accountType', slot: 'accountType', minWidth: 100},
        {label: this.$t('银行账号'), prop: 'bankcard', minWidth: 150},
        {label: this.$t('银行名称'), prop: 'bankcardName', minWidth: 150},
        {label: this.$t('绑卡时间'), prop: 'creationTime', minWidth: 150},
        {label: this.$t('校验名称'), prop: 'checkName', minWidth: 150},
        {label: this.$t('账户名称'), prop: 'name', minWidth: 150},
        {label: this.$t('身份证号'), prop: 'idcard', minWidth: 150},
        {label: this.$t('手机号'), prop: 'phone', minWidth: 150},
        // {label: this.$t('银行卡验证状态'), prop: 'status',},
        {label: this.$t('银行卡认证状态'), prop: 'authStatus', minWidth: 150, isHtml: true},
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const {userId} = this.routesQuery
      const res = await bankCardInfo({
        userId: parseInt(userId)
      })
      if (res.code === 1) {
        const formatHtml = (value) => {
          return value === 1 ? `<span style="color: #13ce66">${this.$t('通过')}</span>` : value === 0 ? `<span style="color: #ff4949">${this.$t('不通过')}</span>` : value === 2 ?
              `<span style="color: #f1b901">${this.$t('未知')}</span>` : ''
        }
        this.data = res.data.map(item => {
          item.status = item.status === 1 ? this.$t('已认证') : this.$t('未认证')
          item.authStatus = formatHtml(item.authStatus)
          return item
        })
      }
    },
    formaterType({accountType}) {
      let value = ''
      switch (accountType) {
        case 3 :
          value = this.$t('借记卡')
          break
        case 10 :
          value = 'Cellphone number'
          break
        case 40 :
          value = 'CLABE'
      }
      return value
    }
  }
}
</script>

<style scoped>

</style>
